
Ext.require([
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.layout.container.Border'
]);
Ext.onReady(function(){
    var win,
        button = Ext.get('show-btn2');

    button.on('click', function(){

        if (!win) {
            win = Ext.create('widget.window', {
        height: 350,
        width: 410,
        x: 500,
        y: 200,
        title: 'Alpha Manager ',
        closable: true,
        plain: true,
        layout: 'fit',
        items: [floater = Ext.create('Ext.Component', {
            xtype: 'component',
            floating: {
                shadow: false
            },
            height: 50,
            width: 50,
            x: 175,
            y: 75
        }), formPanel = Ext.widget('form', {

        frame: true,
        width: 390,
        bodyPadding: 10,
        bodyBorder: true,
        title: 'Crear Usuario',

        defaults: {
            anchor: '100%'
        },
        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'none',
            invalidCls: '' //unset the invalidCls so individual fields do not get styled as invalid
        },

        /*
         * Listen for validity change on the entire form and update the combined error icon
         */
        listeners: {
            fieldvaliditychange: function() {
                this.updateErrorState();
            },
            fielderrorchange: function() {
                this.updateErrorState();
            }
        },

        updateErrorState: function() {
            var me = this,
                errorCmp, fields, errors;

            if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
                errorCmp = me.down('#formErrorState');
                fields = me.getForm().getFields();
                errors = [];
                fields.each(function(field) {
                    Ext.Array.forEach(field.getErrors(), function(error) {
                        errors.push({name: field.getFieldLabel(), error: error});
                    });
                });
                errorCmp.setErrors(errors);
                me.hasBeenDirty = true;
            }
        },

        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Nombre Usuario',
            allowBlank: false,
            
        }, {
            xtype: 'textfield',
            name: 'password1',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false,
           
        }, {
            xtype: 'textfield',
            name: 'password2',
            fieldLabel: 'Repetir Password',
            inputType: 'password',
            allowBlank: false,
            /**
             * Custom validator implementation - checks that the value matches what was entered into
             * the password1 field.
             */
            validator: function(value) {
                var password1 = this.previousSibling('[name=password1]');
                return (value === password1.getValue()) ? true : 'Passwords do not match.'
            }
        },{
            xtype: 'textfield',
            name: 'nombre',
            fieldLabel: 'Nombre',

        },{
            xtype: 'textfield',
            name: 'apellido',
            fieldLabel: 'Apellido',

        },{
            xtype: 'textfield',
            name: 'nroTelefono',
            fieldLabel: 'Nro Telefono',

        },{
            xtype: 'textfield',
            name: 'nroDocumento',
            fieldLabel: 'Nro Documento',

        },{
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email',
            vtype: 'email',
            allowBlank: false
        }],

        dockedItems: [{
            xtype: 'container',
            dock: 'bottom',
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            padding: '10 10 5',

            items: [{
                xtype: 'component',
                id: 'formErrorState',
                baseCls: 'form-error-state',
                flex: 1,
               
             
                tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'),

                getTip: function() {
                    var tip = this.tip;
                    if (!tip) {
                        tip = this.tip = Ext.widget('tooltip', {
                            target: this.el,
                            title: 'Error Details:',
                            autoHide: false,
                            anchor: 'top',
                            mouseOffset: [-11, -2],
                            closable: true,
                            constrainPosition: false,
                            cls: 'errors-tip'
                        });
                        tip.show();
                    }
                    return tip;
                },

                setErrors: function(errors) {
                    var me = this,
                        baseCls = me.baseCls,
                        tip = me.getTip();

                    errors = Ext.Array.from(errors);

                    // Update CSS class and tooltip content
                    if (errors.length) {
                        me.addCls(baseCls + '-invalid');
                        me.removeCls(baseCls + '-valid');
                        me.update(me.invalidText);
                        tip.setDisabled(false);
                        tip.update(me.tipTpl.apply(errors));
                    } else {
                        me.addCls(baseCls + '-valid');
                        me.removeCls(baseCls + '-invalid');
                        me.update(me.validText);
                        tip.setDisabled(true);
                        tip.hide();
                    }
                }
            }, {
                xtype: 'button',
                formBind: true,
                disabled: true,
                text: 'Crear Usuario',
                width: 140,
                handler: function() {
                    var form = this.up('form').getForm();
                    
                    form.submit({
                        
                        url: '/crearUsuario',
                        success: function(form, action) {
                           Ext.Msg.alert('Usuario creado satisfactoriamente');
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Error - No se ha podido crear el usuario');
                        }
                    });

                }
            }]
        }]
    }),{
            border: false
        }]
    });
        }
        button.dom.disabled = true;
        if (win.isVisible()) {
            win.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            win.show(this, function() {
                button.dom.disabled = false;
            });
        }
    });
});
